import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  incrementByAmount,
  asyncAdd,
} from "./store/modules/counter";

import List from "./List";

const App = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <h2>redux-toolkit</h2>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount(2))}>+2</button>
      <button onClick={() => dispatch(asyncAdd())}>async +1</button>

      <hr />

      <List />
    </>
  );
};

export default App;
